<script setup>
  import ListCard from '@/views/home/components/ListCard.vue';
  import HomeHeader from '@/views/home/components/HomeHeader.vue';
  import RightSideStatistics from '@/views/home/components/RightSideStatistics.vue';
  import EquipmentStatistics from '@/views/home/components/EquipmentStatistics.vue';
  import DeviceSearch from '@/views/home/components/DeviceSearch.vue';
  import EquipmentInformation from '@/views/home/components/EquipmentInformation.vue';
  import SpatialAnalysis from '@/views/home/components/SpatialAnalysis.vue';
  import SpatialAnalysisRight from '@/views/home/components/SpatialAnalysisRight.vue';
  import GenerateCharts from '@/views/home/components/GenerateCharts.vue';
  import Monitor from '@/views/home/components/Monitor.vue';
  import MyVidoe from '@/views/home/components/MyVidoe.vue';
  import realTimeVideo from '@/views/home/components/Dialog.vue';
  import PlayBack from '@/views/home/components/PlayBack.vue';
  import GiveAlarm from '@/views/home/components/GiveAlarm.vue';
  import LocationArea from '@/views/home/components/LocationArea.vue';
  import UeView from '@/views/home/components/UeView.vue';
  import AlarmHistory from '@/views/home/components/AlarmHistory.vue';
  import AlarmStatistics from '@/views/home/components/AlarmStatistics.vue';
  import TodoDialog from './TodoDialog.vue';
  import SvgView from '@/views/home/components/SvgView.vue';
  import { getDevicePointAttrGroup, listPage, getDevicePointDetail } from '@/api/auth/ledger.js';
  import { getModelByName } from '../../../utils/ue.js';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const activeIndex = ref(0);
  const isVisible = ref(false);
  const backVisible = ref(false);
  const tabsList = ref([]);
  const tabPasmer = ref({});
  const deviceCode = ref('');
  const monitorFlag = ref(false);
  const contentList = ref([]);
  const treeFlag = ref(false);
  const groupType = ref(0);
  const runList = ref([]);
  const historyFlag = ref(false);
  const isHistory = ref(false);
  const isGenerateCharts = ref(false);
  const params3 = ref({
    deviceCode: '',
    groupType: 1
  });
  const isRight = ref(null);
  const myHistory = ref(null);
  const myMonitor = ref(null);
  const myCharts = ref(null);
  const isSvg = ref(false);
  const params = ref({
    attrCode: '',
    attrName: '',
    attrUnit: '',
    attrVal: '',
    deviceCode: '',
    orderByDesc: '',
    pageNum: 0,
    pageSize: 20
  });
  const activeChange = (index) => {
    activeIndex.value = index;
    if (index != 1) {
      monitorFlag.value = false;
      treeFlag.value = false;
    }
  };
  function getHistory() {
    historyFlag.value = true;
  }
  function saveDistanceData() {
    if (isRight.value) {
      isRight.value.getAnalysislistPage();
    }
  }
  const getDevicePointAttr = () => {
    getDevicePointAttrGroup({ deviceCode: deviceCode.value }).then((res) => {
      tabsList.value = res.data;
      if (myMonitor.value) {
        myMonitor.value.devicePointDetail(tabsList.value[0]);
      }
      // console.log('res-----', res);
    });
  };
  const toMonitor = (a) => {
    console.log('res-----', a);
    monitorFlag.value = true;
    groupType.value = a;
    getDevicePointAttr();
  };
  const treeNodeClick = (a) => {
    treeFlag.value = true;
    deviceCode.value = a.deviceCode;
    params.value.deviceCode = a.deviceCode;
    authNav.updateDeviceCode(a.deviceCode);
    authNav.updateDeviceName(a.deviceName);
    geInfo();
    console.log('a----', a.deviceCode);
  };
  const canChange = () => {
    isVisible.value = true;
  };
  const toChange = () => {
    isHistory.value = true;
    if (myHistory.value) {
      myHistory.value.getList();
    }
  };
  const backChange = () => {
    backVisible.value = true;
  };
  const geInfo = () => {
    listPage(params.value).then((res) => {
      contentList.value = res.data.data;
      console.log('res', res);
    });
  };
  const getRunList = () => {
    params3.value.deviceCode = deviceCode.value;
    getDevicePointDetail(params3.value).then((res) => {
      runList.value = res.data;
      console.log('res', res);
    });
  };
  function switchTab(index) {
    if (index === 2) {
      getRunList();
    }
  }
  function canGive() {
    isGenerateCharts.value = true;
    if (myCharts.value) {
      myCharts.value.getDevicePointAttr();
    }
  }
  function closeCharts() {
    isGenerateCharts.value = false;
  }
  function givSwitchTab(params) {}
  function closeModal() {
    isVisible.value = false;
  }
  function backClose() {
    backVisible.value = false;
  }
  function timeViode() {
    isVisible.value = true;
  }
  function sendModel(name) {
    getModelByName(name).then((res) => {
      isSvg.value = false;
    });
  }
  function closeSvg() {
    isSvg.value = false;
  }
  function handleClick() {
    isSvg.value = true;
  }

  function closeHistory() {
    isHistory.value = false;
  }
</script>
<template>
  <main class="home-main">
    <HomeHeader :activeIndex="activeIndex" @activeChange="activeChange" />
    <UeView @getHistory="getHistory" @saveDistanceData="saveDistanceData" />
    <EquipmentStatistics v-if="activeIndex === 0" />
    <RightSideStatistics v-if="activeIndex === 0" />
    <DeviceSearch v-if="activeIndex === 1" @treeNodeClick="treeNodeClick" @handleClick="handleClick" />
    <EquipmentInformation
      @toMonitor="toMonitor"
      :contentList="contentList"
      v-if="activeIndex === 1 && treeFlag"
      @switchTab="switchTab"
      :runList="runList"
    />
    <Monitor
      @canChange="canChange"
      :tabs="tabsList"
      @canGive="canGive"
      ref="myMonitor"
      :groupType="groupType"
      v-if="monitorFlag && treeFlag"
    />
    <!-- <SpatialAnalysis v-if="activeIndex === 3" @treeNodeClick="treeNodeClick" /> -->
    <SpatialAnalysisRight ref="isRight" v-if="activeIndex === 2 && historyFlag" />
    <realTimeVideo :isVisible="isVisible" @closeModal="closeModal" class="real-video" />
    <PlayBack :backVisible="backVisible" @backClose="backClose" class="real-video" />
    <TodoDialog />
    <MyVidoe v-if="activeIndex === 3" class="my-vidoe" @backChange="backChange" @timeViode="timeViode" />
    <GiveAlarm v-if="activeIndex === 4" @xjChange="canChange" :deviceCode="deviceCode" @toChange="toChange" />
    <LocationArea v-if="activeIndex === 3" />
    <AlarmHistory ref="myHistory" :isHistory="isHistory" @closeModal="closeHistory" />
    <GenerateCharts ref="myCharts" :isGenerateCharts="isGenerateCharts" @closeCharts="closeCharts" />
    <AlarmStatistics v-if="activeIndex === 4" />
    <div v-if="isSvg && activeIndex === 1" class="is-svg">
      <SvgView @sendModel="sendModel" @close="closeSvg" />
    </div>
  </main>
</template>

<style lang="scss" scoped>
  .home-main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .is-svg {
      position: absolute;
      width: 60%;
      height: 80vh;
      top: 120px;
      left: 20%;
      z-index: 999999;
      overflow: hidden;
      background: rgba(5, 30, 67, 0.6);
    }
    .real-video {
      width: 100%;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9999999;
    }
    .my-vidoe {
      position: absolute;
      left: 50%;
      margin-left: -150px;
      bottom: 10px;
      z-index: 99999;
    }
  }
</style>
